<script setup>
import { reactive } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter  } from 'vue-router'
import {login} from '@/common/http.api.js'
const formState = reactive({
  username: '',
  password: '',
});
const $router = useRouter()

const onFinish = async (values) => {
  let data = {
    acc : formState.username,
    pwd : formState.password
  }
  const res = await login(data)
  if(res.code === 0){
    message.success('登录成功')
    sessionStorage.setItem('admID',res.data.admID)
    sessionStorage.setItem('admName',res.data.name)
    sessionStorage.setItem('token',res.token)

    // 对象 $router.push()可以向history对象添加新记录
    $router.push({ path: '/home' })

  }else{
    message.error(res.msg);
  }
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
</script>

<template>
  <div id="content">
    <div class="title">智慧社区-后台管理系统</div>
    <div id="login-box">
      <a-form :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" autocomplete="off"
        @finish="onFinish" @finishFailed="onFinishFailed">
        <a-form-item label="账号"  name="username" :rules="[{ required: true, message: '请输入账号' }]">
          <a-input v-model:value="formState.username" allowClear />
        </a-form-item>

        <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
          <a-input-password v-model:value="formState.password" allowClear />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset:6, span: 18 }">
          <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>

</template>



<style lang="less" scoped>
#content {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right , #5866f5, #5093e6);
  border: 0.1px solid transparent;
  .title{
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #login-box {
    padding-top: 50px;
    height: 300px;
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color:#fff;
    border-radius: 8px;
    transform: translate(-50%, -50%);
    box-shadow: 0px 1px 14px 0px rgba(0,0,0,0.08);
  }
}
</style>